<script setup>
const emit = defineEmits('click')
import { ref } from 'vue'

const isMore = ref(false)
const clickBtn = () => {
  isMore.value = !isMore.value
}
</script>

<template>
  <!-- 当菜单展开时，显示一个透明覆盖层来检测外部点击 -->
  <view class="overlay" v-if="isMore" @tap="isMore = false" @touchmove.stop></view>
  <view class="add_btn flex" @click="clickBtn">
    <u-icon name="more-circle-fill" size="20px"></u-icon>
    <view class="list" :class="{ show: isMore }" @click.stop="isMore = false">
      <slot></slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  background: transparent;
}

.add_btn {
  position: fixed;
  right: 20rpx;
  bottom: 150rpx;
  width: 100rpx;
  height: 100rpx;
  color: #fff;
  background: #409EFF;
  border-radius: 50%;
  z-index: 100;
}

.list {
  position: absolute;
  bottom: calc(100% + 10rpx);
  right: 20rpx;
  transform: scale(0.8);
  background: #666;
  border-radius: 12rpx;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 99;

  &.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}
</style>